<template>
    <div class="search">
        <Header>
            <template v-slot:icon-l><i class="iconfont icon-fanhui" @click="goBack"></i></template>
            <div class="search-box">
                <i class="iconfont icon-search"></i>
                <form action="" onsubmit="return false" @keyup.enter="goSearchList">
                    <input type="search" placeholder="搜您喜欢的产品..." class="search-txt" v-model="searchValue">
                </form>
            </div>
            <template v-slot:icon-r><span @click="goSearchList">搜索</span></template>
        </Header>
        <section>   
            <div class="search-history">
                <h2>
                    <i class="iconfont icon-shijian"></i>
                    <span>历史搜索</span>
                    <span class="clear" @click="clearHistory">清空历史记录</span>
                </h2>
                <ul v-if="searchArr.length">
                    <li v-for="(item,index) of searchArr" :key="index" @click="goHistory(item)">{{item}}</li>
                </ul>
                <div class="default" v-else>暂无搜索记录...</div>
            </div>
        </section>
    </div>
</template>

<script>
import Header from '@/components/common/Header.vue'
import { Dialog } from 'vant'
export default {
    components: {
        Header,
        [Dialog.Component.name]: Dialog.Component
    },
    data () {
        return {
            searchValue:'',
            searchArr:[]
        }
    },
    computed: {},
    watch: {},
    methods: {
        goBack(){
            this.$router.back()
        },
        goSearchList(){
            //判断搜索内容是否为空或空格
            this.searchValue = this.searchValue.trim()
            if(!this.searchValue) return
            //增加搜索历史
            this.searchArr.unshift(this.searchValue)
            //去重
            let newArr = new Set(this.searchArr)
            //本地存储搜索历史
            localStorage.setItem('searchList',JSON.stringify([...newArr]))
            this.$router.push({name:'search-list',query:{key:this.searchValue}})
        },
        //清空历史记录 
        clearHistory(){
            Dialog.confirm({
                title: '提示',
                message: '弹窗内容',
            })
            .then(() => {
                localStorage.removeItem('searchList')
                this.searchArr = []
            })
            .catch(() => {
            });
        },
        //点击搜索历史
        goHistory(item){
            //对搜索历史重新排序
            let arr = JSON.parse(localStorage.getItem('searchList'))
            let newArr = arr.filter(ele => {
                if(ele !== item) return ele
            });
            newArr.unshift(item)
            localStorage.setItem('searchList',JSON.stringify(newArr))
            this.$router.push({name:'search-list',query:{key:item}})
        }
    },
    created () {
        //获取搜索历史
        if(localStorage.getItem('searchList')){
            this.searchArr = JSON.parse(localStorage.getItem('searchList')) || []
        }
    },
    mounted () {},
    beforeCreate () {},
    beforeMount () {},
    beforeUpdate () {},
    updated () {},
    beforeDestroy () {},
    destroyed () {},
    activated () {}
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.search{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 100vw;
    height: calc(100vh - 1.6rem);
    .header{
        ::v-deep .icon-l{
            width: auto;
        }
        form{
            flex:1;
            padding-right: .5333rem;
            .search-txt{
                width: 100%;
                color: #000;
            }
        }
    }
    section{
        flex: 1;
        background-color: #f5f5f5;
        overflow: hidden;
        .search-history{
            h2{
                display: flex;
                align-items: baseline;
                position: relative;
                padding: .5333rem;
                font-weight: 500;
                font-size: .4533rem;
                i{
                    padding-right: .08rem;
                    color: red;
                }
                .clear{
                    position: absolute;
                    right: .5333rem;
                }
            }
            ul{
                display: flex;
                flex-wrap: wrap;
                padding: 0 .2667rem;
                li{
                    margin: .2667rem;
                    padding: .08rem .16rem;
                    font-size: .3733rem;
                    border: 1px solid #ccc;
                }
            }
            .default{
                padding-left: .5333rem;
                margin-top: .2667rem;
            }
        }
    }
}
</style>
